Fix community page mobile responsiveness and horizontal overflow #6082
+51
−4
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Fix horizontal overflow caused by skip-to-content link positioning - Add overflow-x: hidden to html, body, and main containers - Improve StarsCard responsive layout with proper breakpoints - Replace Docusaurus col classes with Tailwind responsive widths - Add flex-wrap and proper gap spacing for community stars grid - Ensure all content respects viewport width on mobile, tablet, and desktop - Maintain accessibility for skip-to-content link when focused
Contributor
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes mobile responsiveness and horizontal overflow issues on the community page. The problem was caused by the skip-to-content accessibility link's fixed positioning and the community stars cards not properly wrapping on smaller screens, resulting in ~12px of unwanted horizontal scrolling on mobile devices.
Key changes:
- Added defensive CSS with
overflow-x: hiddenonhtml,body, and main containers to prevent horizontal scroll - Fixed skip-to-content link positioning to use
position: absolutewhen hidden, switching toposition: fixedon focus for accessibility - Replaced Docusaurus
colclasses with Tailwind responsive utilities, implementing proper breakpoints (mobile: 100%, small: 50%, medium: 33.333%, large: 20% width)
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| documentation/src/css/custom.css | Added overflow-x hidden rules globally and fixed skip-to-content link positioning to prevent horizontal scroll while maintaining accessibility |
| documentation/src/pages/community/index.tsx | Replaced Docusaurus grid classes with Tailwind responsive utilities and added flex-wrap with proper gap spacing for mobile-friendly card layout |
taniandjerry
approved these changes
Dec 12, 2025
taniandjerry
deleted the
fix/community-mobile-responsive-horizontal-overflow
branch
katzdave
added a commit
that referenced
this pull request
Dec 12, 2025
…nses-streaming * 'main' of github.com:block/goose: Fix community page mobile responsiveness and horizontal overflow (#6082) Tool reply meta (#6074) chore: avoid accidentally using native tls again (#6086) Update vars to be capitalised to be in line with other variables in config file (#6085) docs: restructure recipe reference (#5972) docs: configure custom providers (#6044) docs: Community All-Stars Spotlight November 2025, CodeTV Hackathon edition (#6070) fix: include file attachments in queued messages (#5961) fix(ui): prevent incorrect provider type suffix in update dialog #5908 (#5909) docs: mcp elicitation (#6060)
michaelneale
added a commit
that referenced
this pull request
Dec 15, 2025
* main: fix: Make datetime info message more explicit to prevent LLM confusion about current year (#6101) refactor: unify subagent and subrecipe tools into single tool (#5893) goose repo is too big for the issue solver workflow worker (#6099) fix: use system not developer role in db (#6098) Add /goose issue solver github workflow (#6068) OpenAI responses streaming (#5837) Canonical models for Providers (#5694) feat: add Inception provider for Mercury models (#6029) fix old sessions with tool results not loading (#6094) Fix community page mobile responsiveness and horizontal overflow (#6082)
zanesq
added a commit
that referenced
this pull request
Dec 15, 2025
* 'main' of github.com:block/goose: (22 commits) Disallow subagents with no extensions (#5825) chore(deps): bump js-yaml in /documentation (#6093) feat: external goosed server (#5978) fix: Make datetime info message more explicit to prevent LLM confusion about current year (#6101) refactor: unify subagent and subrecipe tools into single tool (#5893) goose repo is too big for the issue solver workflow worker (#6099) fix: use system not developer role in db (#6098) Add /goose issue solver github workflow (#6068) OpenAI responses streaming (#5837) Canonical models for Providers (#5694) feat: add Inception provider for Mercury models (#6029) fix old sessions with tool results not loading (#6094) Fix community page mobile responsiveness and horizontal overflow (#6082) Tool reply meta (#6074) chore: avoid accidentally using native tls again (#6086) Update vars to be capitalised to be in line with other variables in config file (#6085) docs: restructure recipe reference (#5972) docs: configure custom providers (#6044) docs: Community All-Stars Spotlight November 2025, CodeTV Hackathon edition (#6070) fix: include file attachments in queued messages (#5961) ... # Conflicts: # crates/goose-server/src/routes/agent.rs # crates/goose/src/agents/extension_manager.rs # ui/desktop/src/api/sdk.gen.ts
fbalicchia
pushed a commit
to fbalicchia/goose
that referenced
this pull request
Dec 16, 2025
zanesq
added a commit
that referenced
this pull request
Dec 16, 2025
…sions * 'main' of github.com:block/goose: (22 commits) Disallow subagents with no extensions (#5825) chore(deps): bump js-yaml in /documentation (#6093) feat: external goosed server (#5978) fix: Make datetime info message more explicit to prevent LLM confusion about current year (#6101) refactor: unify subagent and subrecipe tools into single tool (#5893) goose repo is too big for the issue solver workflow worker (#6099) fix: use system not developer role in db (#6098) Add /goose issue solver github workflow (#6068) OpenAI responses streaming (#5837) Canonical models for Providers (#5694) feat: add Inception provider for Mercury models (#6029) fix old sessions with tool results not loading (#6094) Fix community page mobile responsiveness and horizontal overflow (#6082) Tool reply meta (#6074) chore: avoid accidentally using native tls again (#6086) Update vars to be capitalised to be in line with other variables in config file (#6085) docs: restructure recipe reference (#5972) docs: configure custom providers (#6044) docs: Community All-Stars Spotlight November 2025, CodeTV Hackathon edition (#6070) fix: include file attachments in queued messages (#5961) ... # Conflicts: # crates/goose-server/src/routes/agent.rs # crates/goose/src/agents/extension_manager.rs # ui/desktop/src/api/sdk.gen.ts
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
@sheikhlimon reported "@taniandjerry @blackgirlbytes I think there's a Mobile layout issue on Community Stars Section StarsCard don't properly stack on smaller screens"
The community page had horizontal overflow issues on mobile and tablet devices, caused by:
2. Community Stars cards not properly wrapping on smaller screens
3. No defensive CSS to prevent horizontal scroll
This created ~12px of unwanted horizontal space, making the page scroll horizontally on mobile devices.
Solution
CSS Fixes (
documentation/src/css/custom.css)overflow-x: hiddentohtml,body, and main containersposition: absolutewithleft: -9999pxwhen hiddenmax-width: 100%to prevent any element from exceeding viewport widthComponent Fixes (
documentation/src/pages/community/index.tsx)colclasses with Tailwind responsive width utilitiesflex-wrapand proper gap spacing for community stars gridtransition-allfor smoother hover effectsTesting
Verified no horizontal overflow at multiple viewport sizes:
Screenshots
Before: Community stars had to scroll horizontally
After: Community stars vertically stacked
Yes, I used goose for this PR.